<template>
  <el-dialog
    :destroy-on-close="false"
    :show-close="false"
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="944"
  >
    <div class="pay-dialog">
      <img class="close" @click="close" src="~/assets/img/close.png" alt="" />
      <div class="header">
        <div class="box">
          <div class="logo"></div>
          <div class="ml10">
            <div class="title">做大做强</div>
            <div class="price">
              <span>当前剩余:&nbsp;</span><span>0NB</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pay-content">
        <template v-if="active === 0">
          <div class="tab-h" @click="active = 0">
            <div class="title">NB购买</div>
            <div class="desc">
              <div class="left">
                <div class="name">选择时长</div>
                <div class="tip"><span>年货好价优惠00:天后结束</span></div>
              </div>
              <div class="right">
                <span>联系客服</span>
              </div>
            </div>
          </div>
          <div class="tab-b" @click="active = 1">
            <div class="title">套餐购买</div>
          </div>

          <div class="list-box">
            <div class="cards">
              <div class="card">
                <div class="price">100NB</div>
                <div class="tip">¥20</div>
              </div>
              <div class="card">
                <div class="price">100NB</div>
                <div class="tip">¥20</div>
              </div>
              <div class="card">
                <div class="price">100NB</div>
                <div class="tip">¥20</div>
              </div>
              <div class="card">
                <div class="price">100NB</div>
                <div class="tip">¥20</div>
              </div>
            </div>
            <div class="box">
              <div class="header1">扫码支付</div>
              <div class="content1">
                <div class="code1">
                  <img src="~/assets/img/qrcode.jpg" alt="" />
                </div>
                <div class="right1">
                  <div class="tag1">新人首单优惠</div>
                  <div class="desc1">应付金额</div>
                  <div class="price1">
                    <span>¥100</span><span>已减20元</span>
                  </div>
                  <div class="type1">
                    <span></span><span></span><span>支持微信/支付宝扫码</span>
                  </div>
                  <div class="btn1">
                    <el-radio label="1">服务协议</el-radio>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="tab-c" @click="active = 0">
            <div class="title">NB购买</div>
          </div>
          <div class="tab-d" @click="active = 1">
            <div class="title">套餐购买</div>
            <div class="desc">
              <div class="left">
                <div class="name">选择时长</div>
                <div class="tip"><span>年货好价优惠00:天后结束</span></div>
              </div>
              <div class="right">
                <span>联系客服</span>
              </div>
            </div>
          </div>
          <div class="list-box1">
            <div class="cards">
              <div class="card">
                <div class="price">一个月</div>
              </div>
              <div class="card">
                <div class="price">3个月</div>
              </div>
              <div class="card">
                <div class="price">12个月</div>
              </div>
              <div class="card">
                <div class="price">24个月</div>
              </div>
            </div>
            <div class="box">
              <div class="header1">选择套餐</div>
              <div class="table">
                <table width="100%">
                  <thead>
                    <tr>
                      <th>
                        <div class="h-card">
                          <div class="title">包含内容</div>
                        </div>
                      </th>
                      <th>
                        <div class="h-card">
                          <div class="title">黄金套餐</div>
                          <div class="sub-title">含8+权益</div>
                          <div class="price">¥50</div>
                          <el-button>立即开通</el-button>
                          <div class="desc">仅0.03/天</div>
                        </div>
                      </th>
                      <th>
                        <div class="h-card">
                          <div class="title">铂金套餐</div>
                          <div class="sub-title">含12+权益</div>
                          <div class="price">¥100</div>
                          <el-button>立即开通</el-button>
                          <div class="desc">仅0.03/天</div>
                        </div>
                      </th>
                      <th>
                        <div class="h-card">
                          <div class="title">钻石套餐</div>
                          <div class="sub-title">含20+权益及后续新增</div>
                          <div class="price">¥300</div>
                          <el-button>立即开通</el-button>
                          <div class="desc">仅0.03/天</div>
                        </div>
                      </th>
                      <th>
                        <div class="h-card">
                          <div class="title">至尊会员</div>
                          <div class="sub-title">全站后续所有100+功能</div>
                          <div class="price">¥1000</div>
                          <el-button>立即开通</el-button>
                          <div class="desc">仅0.03/天</div>
                        </div>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>有效期至</td>
                      <td>2024-02-25</td>
                      <td>2024-02-25</td>
                      <td>2024-02-25</td>
                      <td>2029-02-25（5年）</td>
                    </tr>
                    <tr>
                      <td>赠送NB</td>
                      <td>500</td>
                      <td>1000</td>
                      <td>2000</td>
                      <td>100000</td>
                    </tr>
                    <tr>
                      <td>
                        <div class="table-row">
                          <div class="t">全站学习资料免费</div>
                          <div class="s">价值10万元的付费课程</div>
                        </div>
                      </td>
                      <td>五折</td>
                      <td>免费</td>
                      <td>免费</td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>补单工具</td>
                      <td>
                        <img src="~@/assets/img/dui.png" />
                      </td>
                      <td>
                        <img src="~@/assets/img/dui.png" />
                      </td>
                      <td>
                        <img src="~@/assets/img/dui.png" />
                      </td>
                      <td>
                        <img src="~@/assets/img/dui.png" />
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div class="table-row">
                          <div class="t">抖系详情页工具</div>
                          <div class="imgs">
                            <img src="~@/assets/img/xhs.png" />
                          </div>
                        </div>
                      </td>
                      <td>
                        <img src="~@/assets/img/cuo.png" />
                      </td>
                      <td>
                        <img src="~@/assets/img/dui.png" />
                      </td>
                      <td>
                        <img src="~@/assets/img/dui.png" />
                      </td>
                      <td>
                        <img src="~@/assets/img/dui.png" />
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
const active = ref(1);

const dialogVisible = ref(false);
const close = () => {
  dialogVisible.value = false;
};
const show = () => {
  dialogVisible.value = true;
};
defineExpose({
  close,
  show,
});
</script>

<style lang="scss" scoped>
.pay-dialog {
  position: relative;
  box-sizing: border-box;
  .close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 10px;
    right: 10px;
    z-index: 99;
    cursor: pointer;
  }
  .header {
    height: 150px;
    background: url("~/assets/img/header-bg.png");
    background-size: 100% 100%;
    position: relative;
    .box {
      position: absolute;
      top: 20px;
      left: 20px;
      display: flex;
      .logo {
        width: 47px;
        height: 47px;
        border-radius: 50%;
        background: #ccc;
        margin-right: 10px;
      }
      .title {
        height: 28px;
        font-size: 20px;
        font-weight: 400;
        text-align: LEFT;
        color: #ffffff;
        line-height: 23px;
      }
      .price {
        height: 18px;
        font-size: 13px;
        font-weight: 500;
        text-align: LEFT;
        color: #ffffff;
        display: flex;
        align-items: center;
      }
    }
  }
  .pay-content {
    position: relative;
    width: 100%;
    height: 100%;
    top: -60px;
    .tab-b {
      width: 100%;
      position: absolute;
      top: 13px;
      height: 58px;
      background-color: #9c5a78;
      border-radius: 0 15px 0 0;
      color: #fff;
     
      cursor: pointer;
      .title {
        height: 48px;
        font-size: 20px;
        font-weight: 400;
        text-align: LEFT;
        color: #ffffff;
        line-height: 23px;
        position: absolute;
        right: 180px;
        top: 12px;
      }
    }
    .tab-c {
      width: 100%;
      position: absolute;
      top: 13px;
      height: 58px;
      background-color: #9c5a78;
      border-radius: 15px 0 0 0;
      color: #fff;
     
      cursor: pointer;
      .title {
        height: 48px;
        font-size: 20px;
        font-weight: 400;
        text-align: LEFT;
        color: #ffffff;
        line-height: 23px;
        position: absolute;
        left: 180px;
        top: 18px;
      }
    }
    .tab-d {
      height: 127px;
      background: url("~/assets/img/right-tab.png");
      background-size: 100% 100%;
      position: relative;
      left: 0;
      top: 0;
      .title {
        font-size: 22px;
        font-weight: 400;
        text-align: right;
        color: #ff5500;
        padding-top: 19px;
        padding-right: 180px;
        width: 100px;
      }
      .desc {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        padding: 20px;
        .left {
          display: flex;
          align-items: center;
          .name {
            font-size: 18px;
            font-weight: 400;
            text-align: LEFT;
            color: #000000;
          }
          .tip {
            width: 312px;
            height: 26px;
            background: linear-gradient(270deg, #ffceb6 0%, #ffeee5 100%);
            border-radius: 100px;
            display: flex;
            align-items: center;
            font-size: 12px;
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 500;
            color: #7e523f;
            justify-content: center;
            margin-left: 10px;
          }
        }
        .right {
          font-size: 16px;
          font-weight: 500;
          color: #ff5500;
        }
      }
    }
    .list-box {
      background-color: #f4f4f4;
      padding: 0 20px 20px 20px;
      position: relative;
      .cards {
        display: flex;
        justify-content: space-between;
        .card {
          width: 211px;
          height: 127px;
          background: #ffffff;
          border-radius: 5px;
          .price {
            height: 96px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            font-weight: 500;
          }
          .tip {
            height: 31px;
            background: #ffe4d7;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-weight: 500;
            text-align: LEFT;
            color: #ff5500;
          }
        }
      }
      .box {
        margin-top: 20px;
        height: 279px;
        background: #ffffff;
        border-radius: 10px;
        .header1 {
          font-size: 16px;
          padding-top: 20px;
          padding-left: 20px;
        }
        .content1 {
          padding: 30px 40px;
          display: flex;
          .code1 {
            width: 194px;
            height: 194px;
            border: 1px solid #f2f2f2;
            border-radius: 5px;
            > img {
              width: 100%;
              height: 100%;
            }
          }
          .right1 {
            margin-left: 20px;
            .tag1 {
              height: 24px;
              background: #ffd6d6;
              border-radius: 3px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 13px;
              font-weight: 500;
              text-align: LEFT;
              color: #f72a2a;
            }
            .desc1 {
              height: 22px;
              font-size: 16px;
              font-weight: 500;
              text-align: LEFT;
              color: #999999;
              line-height: 19px;
              margin-top: 23px;
            }
            .price1 {
              margin-top: 8px;
              span:first-child {
                font-size: 30px;
                font-weight: 500;
                text-align: LEFT;
                color: #ff5500;
              }
              span:last-child {
                font-size: 13px;
                font-weight: 500;
                text-align: LEFT;
                color: #ff5500;
                margin-left: 10px;
              }
            }
            .type1 {
              margin-top: 20px;
              font-size: 16px;
              font-weight: 500;
              text-align: LEFT;
              color: #333333;
            }
            .btn1 {
              margin-top: 20px;
              font-size: 16px;
              font-weight: 500;
              text-align: LEFT;
              color: #333333;
            }
          }
        }
      }
    }
    .tab-h {
      height: 127px;
      background: url("~/assets/img/active-tab.png");
      background-size: 100% 100%;
      position: relative;
      left: 0;
      top: 0;
      .title {
        font-size: 22px;
        font-weight: 400;
        text-align: LEFT;
        color: #ff5500;
        padding-top: 19px;
        width: 50%;
        padding-left: 200px;
      }
      .desc {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        padding: 20px;
        .left {
          display: flex;
          align-items: center;
          .name {
            font-size: 18px;
            font-weight: 400;
            text-align: LEFT;
            color: #000000;
          }
          .tip {
            width: 312px;
            height: 26px;
            background: linear-gradient(270deg, #ffceb6 0%, #ffeee5 100%);
            border-radius: 100px;
            display: flex;
            align-items: center;
            font-size: 12px;
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 500;
            color: #7e523f;
            justify-content: center;
            margin-left: 10px;
          }
        }
        .right {
          font-size: 16px;
          font-weight: 500;
          color: #ff5500;
        }
      }
    }

    .list-box1 {
      background-color: #f4f4f4;
      padding: 0 20px 20px 20px;
      .cards {
        display: flex;
        justify-content: space-between;
        .card {
          width: 211px;
          height: 96px;
          background: #ffffff;
          border-radius: 5px;
          .price {
            height: 96px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            font-weight: 500;
          }
        }
      }
      .box {
        margin-top: 20px;
        .header1 {
          font-size: 18px;
          font-weight: 400;
          text-align: LEFT;
          color: #000000;
        }
        .table {
          margin-top: 20px;
          width: 100%;
          height: 533px;
          background-color: #fff;
          table {
            border-collapse: collapse;
          }
          table,
          th,
          td {
            border: 1px solid #f4f4f4;
          }

          .table-row {
            height: 78px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .t {
              height: 18px;
              font-size: 13px;
              font-weight: 500;
              color: #333333;
              line-height: 15px;
              margin-bottom: 10px;
            }
            .s {
              height: 18px;
              font-size: 13px;
              font-weight: 500;
              color: #999999;
              line-height: 15px;
            }
          }
          tbody {
            tr {
              td {
                height: 50px;
                lin-height: 50px;
                text-align: center;
                img {
                  width: 16px;
                  height: 16px;
                }
              }
            }
          }
        }
      }
    }
  }
}

.h-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  .title {
    font-size: 18px;
    font-weight: 500;
    text-align: LEFT;
    color: #333333;
  }
  .sub-title {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    text-align: LEFT;
    color: #666666;
  }
  .price {
    height: 36px;
    font-size: 30px;
    font-weight: 500;
    text-align: LEFT;
    color: #333333;
    line-height: 35px;
    margin: 20px 0;
  }
  .desc {
    margin-top: 10px;
    height: 18px;
    font-size: 13px;
    font-weight: 500;
    text-align: LEFT;
    color: #fb5c14;
    line-height: 15px;
  }
}
</style>
